// .login{
//     height: 100vh;
//     background-position: center;
//     background-size: cover;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     .lgbg{
//         width: 1200px;
//         height: 720px;
//         .loginInput{
//           width: 364px;
//           height: 580px;
//           padding:140px 20px 0 20px;
//           background-color: aliceblue;
//           margin-left: auto;
//             .title{
//                 margin-bottom: 50px;
//                 .logo{
//                     display: flex;
//                     justify-content: center;
//                     align-items: center;
//                 }
//                 h1{
//                     text-align: center;
//                     color: #027cc5;
//                     margin-top: 40px;
//                 }
//             }
//         }
//     }
// }


/* ./index.scss - 重新设计的样式 */

// 定义关键颜色变量
$primary-color: #027cc5; // 保持原有主色调
$secondary-color: #5b8cff; // 用于渐变和hover效果
$glass-color: rgba(255, 255, 255, 0.2); // 玻璃拟态背景色
$glass-border: rgba(255, 255, 255, 0.5); // 玻璃拟态边框

// --- 动画定义 ---
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login {
    height: 100vh;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; // 防止动画溢出

    // 背景图添加模糊效果，突出前景
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: inherit; // 继承 .login 的背景图
        background-position: center;
        background-size: cover;
        filter: blur(5px); // 模糊背景
        z-index: 0;
    }

    .lgbg {
        z-index: 10; // 确保在模糊背景之上
        width: 1000px; // 调整为更现代的宽度，例如 1000px
        height: 600px; // 调整为更现代的高度
        display: flex;
        align-items: center;
        padding: 40px;

        // 玻璃拟态效果 (Glassmorphism)
        background: $glass-color;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 20px;
        border: 1px solid $glass-border;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);

        // 应用淡入动画
        animation: fadeInSlideUp 0.8s ease-out forwards;

        .loginInput {
            width: 380px; // 保持与 Form max-width 接近，并略微增大
            height: auto; // 高度自适应内容
            padding: 40px;
            background-color: #ffffff; // 登录表单部分使用白色背景
            border-radius: 15px;
            margin-left: auto; // 保持居右对齐
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            
            // 确保内容居中，但由于你的组件是靠右对齐的，这里只对标题进行居中
            .title {
                margin-bottom: 40px;
                text-align: center;
                
                .logo {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 10px;

                    img {
                        width: 80px; // 调整 logo 大小
                        height: auto;
                    }
                }
                
                h1 {
                    font-size: 24px; // 调整标题大小
                    font-weight: 600;
                    color: $primary-color;
                    margin-top: 10px;
                }
            }

            // --- Ant Design Form & Input 样式优化 ---
            
            // 移除默认的 AntD 边框阴影，使用更简约的风格
            .ant-input-prefix {
                color: $primary-color;
            }

            .ant-input-affix-wrapper {
                border-radius: 8px;
                // Focus 时底部线条效果
                &:hover, &.ant-input-affix-wrapper-focused {
                    border-color: $secondary-color !important;
                    box-shadow: 0 0 0 2px rgba($secondary-color, 0.2) !important;
                }
            }

            // AntD Button 样式优化
            .ant-btn-primary {
                height: 40px;
                font-size: 16px;
                font-weight: 500;
                border-radius: 8px;
                background: linear-gradient(135deg, $primary-color, $secondary-color); // 渐变色按钮
                border: none;
                transition: all 0.3s ease; // 添加动画过渡

                &:hover {
                    opacity: 0.9;
                    box-shadow: 0 6px 15px rgba($primary-color, 0.4);
                    transform: translateY(-2px);
                }

                // 加载中状态
                &.ant-btn-loading {
                    opacity: 0.8;
                    cursor: not-allowed;
                }
            }
        }
    }
}

// 确保 Form.Item 之间的间距更紧凑
.ant-form-item {
    margin-bottom: 20px; 
}